<template>
    <div class="bindEmail">
        <div class="security-content">
            <span class="Account-security font-w">账号安全</span>
            <span class="clr0 pd-10">></span>
            <span class="clr0 pd-10">绑定邮箱</span>
        </div>
        <div class="security-content bt-solid">
            <span class="clr0 font-w">绑定邮箱</span>
            <span class="Account-security pd-10 ft-10">邮箱绑定后不可更换</span>
        </div>

        <div class="bindEmail-content">
            <div class="bindEmail-input">
                <label for="email"
                    class="email-color">邮箱</label>
                <hb-input @ipt="e_re"
                    formType="user"
                    back="itype" />
                <label for="email"
                    class="email-color">邮箱验证码</label>

                <span class="text-right email-color">验证邮件可能会误判为垃圾邮件，请注意查收</span>
                <hb-input @ipt="e_re"
                    formType="vercode"
                    back="itype" />
                <span class="getyzm cur"
                    v-text="getYZm"></span>

            </div>
            <div class="btn2">
                <hb-button txt="绑定"
                    @clk="e_signin"
                    id="s-b" />
            </div>
        </div>

    </div>
</template>

<script>
export default {
	name: 'bindEmail',
	data() {
		return {
			getYZm: '获取验证码',
			emailInput: '',
			email: '',
			yzm: '',
			form: {
				user: null,
				password: null,
			},
			checkRe: {
				user: false,
				password: false,
			},
			msgBack: '',
		}
	},
	created() {},
	methods: {
		e_signin(e) {
			console.log('你点击了绑定按钮')
		},
		e_re(re, inputed, back) {
			this.checkRe[back] = re
			this.form[back] = inputed
			console.log(this.form[back])
		},
	},
}
</script>

<style scoped>
.bindEmail-content {
	width: 100%;
	height: 566px;
	background: #171926;
	border: 1px solid;
}
.bindEmail-input {
	width: 600px;
	margin: auto;
	margin-top: 5%;
	line-height: 34px;
	position: relative;
}
#s-b {
	width: 341px;
}
.Account-security {
	color: var(--clr1);
}
.bt-solid {
	border-bottom: 1px solid #171926;
	margin-top: 33px;
}
.email-color {
	color: #686f9a;
	font-size: 10px;
	padding-left: 2px;
}
.text-right {
	text-align: right;
	float: right;
	line-height: 34px;
}
.btn2 {
	text-align: center;
	margin-top: 12px;
}
.getyzm {
	position: absolute;
	right: 3%;
	bottom: 3%;
	border-left: 1px solid #4e1313;
	color: var(--clr1);
	font-size: 10px;
	padding-left: 3px;
}
</style>